<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="../Build/CesiumUnminified/Cesium.js"></script>
  <style>
    /* @import url(./Build/CesiumUnminified//Widgets/widgets.css); */
    @import url(../Build/CesiumUnminified/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .canvas {
      position: absolute;
      left: 10px;
      top: 10px;
      display: none;
    }

    #canvas-a {
      top: 10px;
    }

    #canvas-b {
      top: 120px;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <canvas id="canvas-img"></canvas>
  <canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
  <canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
  <!-- <img src="./images/cesium.png" alt=""> -->
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    let viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: true
    })
    // // drawCanvasImage
    // let i = 0;
    // var curCanvas = 'a';
    // function drawCanvasImage(time, result) {
    //   var canvas = document.getElementById('canvas-img');
    //   let cwidth = 118;
    //   let cheight = 30;
    //   var ctx = canvas.getContext('2d');
    //   var img = new Image();
    //   img.src = './images/cesium.png';
    //   ctx.clearRect(0, 0, cwidth, cheight);
    //   img.onload = function () {
    //     if (i <= cwidth) {
    //       // ctx.drawCanvasImage(img, i, 0)
    //       ctx.drawImage(img, i, 0);
    //     } else {
    //       i = 0;
    //       i += 3;
    //     }
    //   }
    //   curCanvas = curCanvas === 'a' ? 'b' : 'a';
    //   return canvas;
    // }

    // // point 
    // viewer.entities.add({
    //   name: 'Tokyo',
    //   position: Cesium.Cartesian3.fromDegrees(104.303854, 24.871046, 1.0),
    //   point: {
    //     pixelSize: 10,
    //     color: Cesium.Color.RED,
    //     outlineColor: Cesium.Color.WHITE,
    //     outlineWidth: 3
    //   },
    //   label: {
    //     text: 'Tokyo',
    //     // font: '14pt monospace',
    //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    //     outlineWidth: 2,
    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //     pixelOffset: new Cesium.Cartesian2(0, -9)
    //   }
    // })
    // // rectangle 
    // viewer.entities.add({
    //   name: 'rectangle',
    //   rectangle: {
    //     coordinates: Cesium.Rectangle.fromDegrees(-90.0, 30.0, -70.0, 35.0),
    //     material: new Cesium.ImageMaterialProperty({
    //       image: new Cesium.CallbackProperty(drawCanvasImage(10), false),
    //       transparent: true
    //     }),
    //   }
    // })
    // viewer.zoomTo(viewer.entities)
    var rotation = Cesium.Math.toRadians(30);
    var curCanvas = 'a';
    function getRotationValue() {
      rotation += 0.005;
      return rotation;
    }

    function drawCanvas(time, result) {
      var canvas = document.getElementById("canvas-" + curCanvas);
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.font = 'italic 40pt Calibri';
      context.fillStyle = "red";
      context.fillText(Cesium.JulianDate.toDate(Cesium.JulianDate.now()).getTime(), 20, 100);
      //console.log(Cesium.JulianDate.toDate(time).getTime());
      curCanvas = curCanvas === 'a' ? 'b' : 'a';
      return canvas;
    }

    let i = 0;
    function drawCanvasImage(time, result) {
      var canvas = document.getElementById("canvas-" + curCanvas);
      let cwidth = 700;
      let cheight = 100;
      let imgWidth = 60;
      let imgHeight = 34;
      var ctx = canvas.getContext("2d");
      var img = new Image();
      img.src = "./images/cesium.png";
      // let imgcount = cwidth/imgWidth
      ctx.clearRect(0, 0, cwidth, cheight);
      img.onload = function () {
        if (i <= cwidth) {
          // for(let k=0;k<imgcount+1;k++)
          //     ctx.drawImage(img,i+k*imgWidth,0);
          ctx.drawImage(img, i, 0, imgWidth, imgHeight);

          // ctx.drawImage(img,0,0,imgWidth-i,imgHeight,imgcount*imgWidth+i,0,imgWidth-i,imgHeight);
          // ctx.drawImage(img,imgWidth-i,0,i,imgHeight,0,0,i,imgHeight);

        } else
          i = 0

        i += 3;
      }
      curCanvas = curCanvas === 'a' ? 'b' : 'a';
      return canvas;
    }
    viewer.entities.add({
      name: 'Rotating rectangle with rotating texture coordinate',
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-90.0, 30.0, -70.0, 35.0),
        material: new Cesium.ImageMaterialProperty({
          // image: new Cesium.CallbackProperty(drawCanvas, false),
          image: new Cesium.CallbackProperty(drawCanvasImage, false),
          transparent: false
        }),
        // rotation: new Cesium.CallbackProperty(getRotationValue, false),
        // stRotation: new Cesium.CallbackProperty(getRotationValue, false)
      }
    });

  </script>
</body>

</html>